{extend name="lib/main" /}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="javascript"}
<script>
    /**
     * 加载表格
     */
    function initTable() {
        //先销毁表格
        $('#tb').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#tb").bootstrapTable({
            method: "Post",  //使用Post请求到服务器获取数据
            url: "{:url('app/index')}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 15,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [15, 50],  //记录数可选列表
            search: false,  //是否启用查询
            sortable: true, //是否启用排序
            sortOrder: "desc", //排序方式
            //showColumns: true,  //显示下拉框勾选要显示的列
            //showRefresh: true,  //显示刷新按钮
            //sortName: "PullTime",
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            contentType: "application/x-www-form-urlencoded",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    sortName: params.sort,
                    sortOrder: params.order,
                    keywords: $("input[name=keywords]").val(),
                    //sex: $("select[name=sex]").val(),
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行

            },
            onLoadError: function () {  //加载失败时执行
                layer.msg("加载数据失败", { time: 1500, icon: 2 });
            },
            rowStyle: function (row, index) {
                var strclass = "";
                return { classes: strclass }
            }
        });
    }

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();
        //点击查询按钮
        $("#search").bind("click", initTable);
        $("#btnAdd").bind("click", add);

    });

    function initAcTable() {
        initTable();
    }

    /**
     * 新增页
     */
    var layer_add_index;
    function add() {
        layer_add_index = layer.open({
            type: 2,
            title: "注册应用",
            area: ['48%', '50%'],
            content: "{:url('app/add')}"
        })
    }

    /**
     * 修改页
     */
    var layer_edit_index;
    function edit(id) {
        layer_edit_index = layer.open({
            type: 2,
            title: "修改应用",
            area: ['80%', '90%'],
            content:"{:url('app/update')}?id="+id
        })
    }

    /**
     * 修改页
     */
    var layer_edit_secret_index;
    function update_secret(id) {
        layer_edit_secret_index = layer.open({
            type: 2,
            title: "更新密钥",
            area: ['80%', '90%'],
            content:"{:url('app/update_secret')}?id="+id
        })
    }

    /**
     * 锁定
     * @param id
     * @param name
     * @param status
     */
    function lock(id, name, status) {
        var msg = '你确定要启用【'+ name +'】吗？';
        if (status == 1) {
            msg = '你确定要锁定【'+ name +'】吗？';
        }
        layer.confirm(msg, {
            btn: ['是', '否'] //按钮
        }, function () {
            var load_index = layer.load(0, { shade: false });
            $.ajax({
                type: "post",
                url: "{:url('app/lock')}",
                data: { id: id },
                dataType: "json",
                success: function (result) {
                    layer.close(load_index);
                    if (result.code == 1) {
                        var ly = layer.alert(result.msg, function () {
                            $('#tb').bootstrapTable('refresh');
                            layer.close(ly);
                        });
                    } else {
                        layer.alert(result.msg);
                    }
                },
                error:function(xhr,textStatus){
                    layer.close(load_index);
                    layer.alert('服务器繁忙！');
                }
            });
        });
    }

    /**
     * 动作
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(index, row) {
        var html = "";
        if (is_show('app_manager/app/lock')) {
            if (row.status == 1) {
                html += "<a href=\"javascript:lock("+ row.id + ", '"+ row.name +"', '"+ row.status +"');\"><i class=\"glyphicon glyphicon-lock text-danger\"></i>锁定</a>&nbsp;&nbsp;";
            } else {
                html += "<a href=\"javascript:lock("+ row.id + ", '"+ row.name +"', '"+ row.status +"');\"><i class=\"glyphicon glyphicon-ok-sign text-success\"></i>启用</a>&nbsp;&nbsp;";
            }
        }
        if (is_show('app_manager/app/update')) {
            html += "<a href=\"javascript:edit("+ row.id + ", '"+ row.name +"');\"><i class=\"glyphicon glyphicon-edit text-green\"></i>编辑</a>&nbsp;&nbsp;";
        }

        if (is_show('app_manager/app/update_secret')) {
            html += "<a href=\"javascript:update_secret("+ row.id + ", '"+ row.name +"');\"><i class=\"glyphicon glyphicon-edit text-green\"></i>更新密钥</a>&nbsp;&nbsp;";
        }

        return html;
    }

    function statusFormat(index, row){
        if (index ==1) {
            return "<span><i class='glyphicon glyphicon-ok text-green'/></span>";
        } else {
            return "<span><i class='glyphicon glyphicon-remove text-danger'/></span>";
        }

    }

    // 刷新当前一页表格
    function refreshtb() {
        $('#tb').bootstrapTable('refresh');
    }
</script>
{/block}
{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                </div>
                <div class="col-sm-2 m-b-xs">
                    {if(is_show('app_manager/app/add'))}
                    <span>
                        <button type="button" class="btn btn-primary btn-sm" id="btnAdd"><i class="glyphicon glyphicon-plus"></i> 注册应用</button>
                    </span>
                    {/if}
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 col-sm-offset-5">

                        </div>
                        <div class="col-sm-2 col-sm-offset-2">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <input type="text" placeholder="请输入搜索关键字" class="input-sm form-control" id="keywords" name="keywords">
                                    <button type="button" class="btn btn-sm btn-primary" id="search">搜索</button>
                                </span>
                            </div>
                        </div>
                        <span id="refresh" class="fa fa-refresh fa-spin" title="刷新" onclick="javascript:$('#tb').bootstrapTable('refresh')"></span>
                    </div>
                    <table data-toggle="table" id="tb" data-pagination="true">
                        <thead>
                        <tr>
                            <th data-align="center" data-field="name">应用名称</th>
                            <th data-align="center" data-field="plat_id">应用ID</th>
                            <th data-align="center" data-field="plat_key">应用KEY</th>
                            <th data-align="center" data-field="plat_secret">应用密钥</th>
                            <th data-align="center" data-field="status" data-formatter="statusFormat" >状态</th>
                            <th data-align="center" data-field="created_time"  data-sortable="true">添加时间</th>
                            <th data-align="center" data-field="updated_time"  data-sortable="true">更新时间</th>
                            <th data-align="center" data-formatter="operateFormatter">操作</th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}